<template>
    <div class="Index">
        <!--导航栏引入-->
        <div>
            <Nav></Nav>
        </div>
        <div class="main_content">
            <div>
                <Banner></Banner>
            </div>
            <!--预定组件-->
            <div>
                <!--                <Block></Block>-->
            </div>
            <el-divider>房间预订</el-divider>
            <div style="padding-left: 10px" class="hotel_lun">
                <el-row  style="margin-top: 10px">
                    <el-col style="height: 200px;width: 210px;margin-top: 100px" :span="4" v-for="(item, index) in tableData"
                            :key="index" :offset="1">
                        <el-card :body-style="{ padding: '5px' }">
                            <img style="width: 150px;height: 180px;margin-left: 25px;margin-top: 5px"
                                 :src="require('@/assets/img/'+item.imgUrl)" alt="">
                            <div style="padding: 14px;">
                                <span>{{ item.name }}</span>
                                <div class="bottom clearfix">
                                    <time class="time">价格：{{ item.price }}RMB</time>
                                    <el-button type="text" @click="toHotel(item.id)" class="button">点击预订</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
<!--        <Footer style=""></Footer>-->
    </div>
</template>

<script>
    import Block from '../components/block'
    import Nav from '../components/Nav'
    import Banner from '../components/Banner'
    import Footer from '../components/Footer'

    export default {
        name: "Index",
        components: {
            Nav,
            Banner,
            Block,
            Footer
        },
        data() {
            return {
                tableData: {},
            };
        },
        methods: {
            toHotel(id) {
                this.$router.push({name: 'Hotel', query: {id: id}});
            },
            /*查询所有的房间型号*/
            findAll() {
                let _this = this;
                this.$axios
                    .get(' http://localhost:8088/roomtype/getRoomtype')
                    .then(function (res) {
                        _this.tableData = res.data;
                        console.log(_this.tableData);
                    })
                    // eslint-disable-next-line no-unused-vars
                    .catch(function (err) {
                        alert('查询失败');
                    });
            },
        },
        mounted() {
            this.findAll()
        }

    }
</script>

<style scoped>
    .main_content {
        float: left;
        width: 100%;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 200px;
        height: 200px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
